<template>
  <div class="subpage">
    <div class="banner"></div>
    <div class="subjectinfo">
      <div class="subinfo">
        <div class="back" @click="goBack">返回上一页 >></div>
        <div class="subbox">
          <div class="box2">
            <question-info
              :data="questionList"
              :isCommit="isCommit"
              @afterCommit="afterCommitQuestion"
              :courseId="courseId"
              :questionAnswerList="questionAnswerList">
            </question-info>
           <!-- <div v-else class="no_data">
              <img src="/static/image/noData.jpg" alt="" style="display: block">
            </div>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import courseMenu from '@/components/course-menu'
  import questionInfo from '@/components/question-info'
  export default {
    components: {courseMenu, questionInfo},
    data () {
      return {
        courseId: null,
        isCommit: false, // 是否提交试题
        contentCurrentPage: 1,
        videoCurrentPage: 1,
        videoTotal: 0,
        currentQuestion: {}, // 当前试题对象
        modeId: '',
        startDate: null,
        studyTime: 0,
        timeInterval: null,
        needAnswerQuestionCount: 0, // 需要在线作答题数量
        questionAnswerList: [], // 试题答案列表
        currentQuestionPage: 0, // 试题分页
        questionVideoCurrentPage: 1,
        questionVideoTotal: 0,
        questionList: [],
        questionTotal: 0, // 总题数
        questionVideoList: [], // 例题视频列表
        questionVideoListLength: 0,
        educationVideoContentTotal: 0,
        educationVideoContent: '',
        educationVideoContentArray: [], // 知识点视频列表
        educationVideoCurrentPage: 1,
        hasEducationVideo: true,
        typeOneStudyTime: 0,
        typeTwoStudyTime: 0,
        typeThreeStudyTime: 0,
        courseOrPaperInfo: {},
        timeLimit: 360, // 默认6分钟3600s
        typeStudyTimeInterval: null // 类型学习计时器
      }
    },

    destroyed () {
     // clearInterval(this.timeInterval)
     // this.saveStudyHistory()
    },

    mounted () {
      //   this.typeStudyTimeInterval = setInterval(this.typeStudyInterval, 1000);
    //  this.timeInterval = setInterval(this.countDown, 1000);
    //  this.startDate = new Date().getTime()
      this.courseOrPaperInfo = this.$store.getters.getCourseOrPaperInfo
      this.courseId = this.courseOrPaperInfo.courseId
      this.getCourseQuestion()
    },

    methods: {

      getCourseQuestion () {
        let that = this
        that.axios.get(that.$httpApi.httpUrl('/student/course/getCourseQuestion'), {
          params: {
            courseId: that.courseId,
          }
        }).then(function (response) {
          let result = response.data.data
          that.questionList = result.questionList
          // 设置试题已提交状态
          if (result.isCommit) {
            that.isCommit = true
            // clearInterval(that.typeStudyTimeInterval) // 清除计时器限制
          }
          if (that.questionList && that.questionList.length > 0) {
            for (let i = 0; i < that.questionList.length; i++) {
              let question = that.questionList[i]
              if (question.question_type === 4) {
                if (!question.userInfoAnswer) {
                  question.userInfoAnswer = []
                }
              }
              let enclosure = []
              question.enclosure.forEach(function (item) {
                if (item) {
                  enclosure.push(item)
                }
              })
              that.questionAnswerList.push({
                questionInfoId: question.id,
                questionAnswer: question.answer,
                questionType: question.question_type,
                answerEnclosure: enclosure,
              //  correct_status: question.correct_status,
                mark: question.mark,
              })
            }
            that.questionTotal = that.questionList.length
          }
          if (that.questionTotal > 0) {
            that.currentQuestion = that.questionList[0]
            that.currentQuestion.number = 1
          }

          if (response.data.questionVideo) {
            that.questionVideoList = response.data.questionVideo
            that.questionVideoListLength = that.questionVideoList.length
          }
        })
      },

      // 保存学习记录
      saveStudyHistory () {

      },

      afterCommitQuestion () {
        this.getCourseQuestion()
        this.currentQuestionPage = 0
        this.isCommit = true
      },

      educationVideoChange (val) {
        this.educationVideoContent = this.educationVideoContentArray[val - 1]
      },

      typeStudyInterval () {
        if (this.type === 1) {
          this.typeOneStudyTime++
        } else if (this.type === 2) {
          this.typeTwoStudyTime++
        } else {
          this.typeThreeStudyTime++
        }
      },

      changStudyType (type) {
        this.type = type
      },

      countDown () {
        this.studyTime++
      },

      goBack () {
        this.$router.go(-1)
      },

      nextQuestion () {
        let questionAnswer = this.questionAnswerList[this.currentQuestionPage]
        questionAnswer.userInfoAnswer = this.currentQuestion.userInfoAnswer
        questionAnswer.questionInfoId = this.currentQuestion.questionInfoId
        this.currentQuestionPage++;
        this.currentQuestion = this.questionList[this.currentQuestionPage]
      },

      getUserAnswer (val) {
        this.currentQuestion.userInfoAnswer = val
        this.setUserAnswer()
      },

      getMoreAnswer (val) {
        let questionAnswer = this.questionAnswerList[this.currentQuestionPage]
        questionAnswer.userInfoAnswer = val
        questionAnswer.questionInfoId = this.currentQuestion.questionInfoId
      },

      setUserAnswer () {
        let questionAnswer = this.questionAnswerList[this.currentQuestionPage]
        questionAnswer.userInfoAnswer = this.currentQuestion.userInfoAnswer
        questionAnswer.questionInfoId = this.currentQuestion.questionInfoId
      },

      openCourseMenu (key, keyPath) {
        console.log('key:' + key);
        console.log('keyPath:' + keyPath);
      },

      closeCourseMenu (key, keyPath) {
        console.log('key:' + key);
        console.log('keyPath:' + keyPath);
      },

      lastQuestion () {
        let questionAnswer = this.questionAnswerList[this.currentQuestionPage]
        questionAnswer.userInfoAnswer = this.currentQuestion.userInfoAnswer
        questionAnswer.questionInfoId = this.currentQuestion.questionInfoId
        this.currentQuestionPage--
        this.currentQuestion = this.questionList[this.currentQuestionPage]
      },

      // 提交
      commitQuestion () {
        let that = this
        let noAnswerCount = 0
        that.questionAnswerList.forEach(function (item) {
          if (!item.userInfoAnswer && item.needAnswerFlag) {
            noAnswerCount++ // 未答试题数量
          }
        })
        let message = "确定提交吗?"
        if (noAnswerCount > 0) {
          message = '您还有' + noAnswerCount + '题尚未做答, 确定提交吗?'
        }
        that.$confirm(message, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            userInfoAnswerList: that.questionAnswerList,
            courseId: that.courseId
          }
          that.axios.post(that.$httpApi.httpUrl('/student/course/commitQuestion'), params)
            .then(function (response) {
              if (response.data.code === 1) {
                that.isCommit = true
                that.$message({
                  type: 'success',
                  message: response.data.message
                })
              } else {
                that.$message({
                  type: 'error',
                  message: response.data.message
                })
              }
            })
        }).catch(() => {
          that.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      },

      basicHandleCurrentChange (val) {
        this.basicContent = this.basicContentArray[val - 1]
      },

      videoHandleCurrentChange (val) {
        this.videoCurrentPage = val
      },

      questionVideoHandleCurrentChange (val) {
        this.questionVideoCurrentPage = val
      },

      goBack () {
        this.$router.go(-1)
      },

      changeMenu (item) {
        console.log('menuItem:' + item)
      }
    }
  }
</script>


<style lang='scss' scoped>
  .no_data {
    /* position: absolute;
     left: 45%;
     top: 60%;
     font-weight: bold*/
    width:100%;height:100%;display: flex;align-items: center;justify-content: center;
  }

  /* .subinfo .el-pagination.is-background .el-pager li:not(.disabled).active {
     background-color: #FD7A3A;   // 进行修改背景和字体
     color: red;
   }*/

  /*  .el-pagination button:hover {
      color: red !important;
    }
    .el-select-dropdown__item .selected {
      color: red !important;;
    }
    .el-select .el-input .is-focus .el-input_inner {
      border-color: red !important;;
    }*/


  .subpage{
    .banner{
      width: 100%;
      height: 360px;
      background: url('/static/image/bannerpic.png') no-repeat;
      background-size:100% 100%;
      background-position: center;
    }
    .subjectinfo{
      width: 1200px;
      margin: 0 auto;
      background-color: #8db963;
      padding: 10px;
      min-height: 500px;
      display: flex;
      margin-top: 20px;
      margin-bottom: 20px;

      .userinfo{
        width: 200px;
        height: 100%;
        .userul{
          width: 100%;
          color: #fff;
          padding-left: 20px;
          padding-top: 20px;
          li{
            height: 45px;
            .text2{text-indent: 2em;line-height: 30px;}
          }
        }
        .el-menu-item.is-active {
          background-color: #fff !important;
        }
      }
      .subinfo{
        flex: 1;
        min-height: 500px;
        background-color: #fff;
        padding: 10px;
        position: relative;
        .type1{
          position: absolute;
          left: 0;
          top:0;
          z-index: 0;
        }
        .back{
          width: 100%;
          text-align: right;
          color: #ca0000;
          cursor: pointer;
        }
        .subbox{
          width: 100%;
          min-height: 500px;
          position: relative;
          box-sizing: border-box;
          p {
            display: block;
          }
          .page {
            position: absolute;
            left: 0;
            bottom: 10px;
            width: 100%;
            text-align: center;
          }

          // box-sizing: border-box;
          .tabnav{
            width: 100%;
            display: flex;
            display: -webkit-flex;
            justify-content: space-around;
            padding: 10px 224px;
            .navli{
              width: 120px;
              background-color: #8db963;
              img{width: 100%;height: 100%;cursor: pointer;}
            }
          }
          .box3{
            width: 100%;
            min-height: 400px;
            box-sizing: border-box;
            margin: 65px auto 10px;
            padding: 10px;
            border: 1px solid #8db963;
            border-radius: 10px;
            .title{width: 100%;text-align: center;
              img{width: 180px;height: 35px;}
            }
            .page{width: 100%;text-align: center;margin-top: 30px;}

          }
          .box2{
            width: 100%;
            min-height: 300px;
            box-sizing: border-box;
            margin: 65px auto 10px;
            padding: 10px;
            border: 1px solid #8db963;
            border-radius: 10px;
            .page{width: 100%;text-align: center;margin-top: 30px;}
          }
          .box1{
            .page{width: 100%;text-align: center;margin-top: 30px;}
            width: 100%;
            min-height: 300px;
            box-sizing: border-box;
            margin: 65px auto 10px;
            padding: 20px 10px 30px;
            border: 1px solid #8db963;
            border-radius: 10px;
            .title{width: 100%;text-align: center;
              img{width: 180px;height: 35px;}
            }
            .tabinfo{
              /* display: flex;*/
              justify-content: space-around;
              .infoitem{
                padding: 10px 20px;
                img{height: 160px;width: 100%}
                .tils2{
                  color: #ccc;
                  font-size: 13px;
                  line-height: 16px;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
